<template>
  <div class="account-page" v-show="routerPd">
    <div class="top-bar">
      <div class="avatar">
        <el-avatar
            size="large"
            :src="avatarUrl"
            icon="User"
        ></el-avatar>
      </div>
      <div class="auth-entry" v-if="show">
        <span @click="login">登录</span> | <span @click="regiust">注册</span>
      </div>
      <h2 v-if="!show" style="margin-left: 20px">{{name}}</h2>
    </div>

    <div class="nav-menu">
      <div
          v-for="(item, index) in navList"
          :key="index"
          class="nav-item"
      >
        <el-icon :size="20"><component :is="item.icon"></component></el-icon>
        <span class="nav-text">{{ item.text }}</span>
      </div>
    </div>

    <div class="func-list">
      <div
          v-for="(func, idx) in funcList"
          :key="idx"
          class="func-item"
          @click="funcListClick(idx)"
      >
        <span>{{ func }}</span>
        <el-icon class="arrow-icon"><ArrowRight /></el-icon>
      </div>
    </div>
  </div>
  <router-view v-show="!routerPd"></router-view>
</template>

<script setup lang="ts">
import {ShoppingCart, Star, Tools,WalletFilled} from '@element-plus/icons-vue'
import {userstore} from "@/store/userStore.ts";
import {watchEffect,ref} from "vue";
import {useRouter,RouterView} from "vue-router";
import mitt from "@/utils/mitt.ts";
import {ElMessageBox} from "element-plus";
let userMessage=userstore()
let name=ref('');
let show=ref(true);
let router=useRouter();
let routerPd=ref(true);
const navList= [
  { icon: WalletFilled, text: '待付款' },
  { icon: ShoppingCart, text: '待收货' },
  { icon: Star, text: '待评价' },
  { icon: Tools, text: '退换/售后' }
]
const funcList = [
  '全部订单',
  '我的积分',
  '我的优惠券',
  '我的红包',
  '退出登录'
]
const avatarUrl = ''
mitt.on('back',(v:any)=>{
  routerPd.value=v;
})
mitt.on('login',(v:any)=>{
  show.value=v;
})
watchEffect(()=>{
  if (userMessage.user===''&&userMessage.pwd==='') {
    show.value = true
  }
  else {
    show.value = false
  }
  if (userMessage.user) {
   name.value=userMessage.user
  }
})
function funcListClick(idx:number) {
  if (idx === 4) {
    if (show.value === false) {
      ElMessageBox.confirm('确定退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ElMessageBox.alert('账号已退出！', '提示', {type: 'success'});
        show.value = true;
      }).catch(() => {
        ElMessageBox.alert('账号未退出！', '提示', {type: 'info'});
      });
    }
    else {
      ElMessageBox.alert('请先登陆账号！', '提示', {type: 'info'});
    }
  }
}
function login() {
  console.log('login')
  routerPd.value=false;
  router.push('/login')
}
function regiust() {
  console.log('regiust')
  routerPd.value=false;
  router.push('/regiust')
}
</script>

<style scoped>
.account-page {
  background-color: #fff;
  min-height: 100vh;
}

.top-bar {
  display: flex;
  align-items: center;
  background: linear-gradient(to right, #f53d3d, #f36d6d);
  padding: 20px 15px;
  color: #fff;
}
.avatar {
  margin-right: 10px;
}
.auth-entry {
  font-size: 16px;
}

.nav-menu {
  display: flex;
  justify-content: space-around;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.nav-text {
  margin-top: 5px;
  font-size: 12px;
}

.func-list {
  padding: 10px;
}
.func-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}
.arrow-icon {
  color: #999;
}
</style>